<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
       <el-aside style="width: 200px; min-height: 100vh; background-color: #001529;">
        <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center;">
          logo
        </div>

        <el-menu router background-color="#001529" text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none" :default-active="$route.path">
          <el-menu-item index="/">
              <i class="el-icon-house"></i>
              <span slot="title">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/element">
              <i class="el-icon-house"></i>
              <span slot="title">element</span>
          </el-menu-item>
          <el-menu-item index="/a">
              <i class="el-icon-house"></i>
              <span slot="title">系统首页</span>
          </el-menu-item>
          <el-submenu>
              <i class="el-icon-menu"></i>
              <span slot="title">信息管理</span>
            <el-menu-item>用户信息</el-menu-item>
          </el-submenu>
        </el-menu>
       </el-aside>
    </el-container>
    <el-row>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #ccc; text-align: center;">
          <img style="width: 80%;" src="@/assets/logo.png" alt="">
          <div style="text-align: center;"> 这是一段描述</div>
          <div style="color: red;">价格$99.00</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #ccc; text-align: center;">
          <img style="width: 80%;" src="@/assets/logo.png" alt="">
          <div style="text-align: center;"> 这是一段描述</div>
          <div style="color: red;">价格$99.00</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #ccc; text-align: center;">
          <img style="width: 80%;" src="@/assets/logo.png" alt="">
          <div style="text-align: center;"> 这是一段描述</div>
          <div style="color: red;">价格$99.00</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #ccc; text-align: center;">
          <img style="width: 80%;" src="@/assets/logo.png" alt="">
          <div style="text-align: center;"> 这是一段描述</div>
          <div style="color: red;">价格$99.00</div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-button>Element独特的按钮</el-button>
        <el-button type="warning">Element独特的按钮</el-button>
        
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-input style="width: 200px;" v-model="value" placeholder="请输入内容"></el-input>
        <el-input type="textarea" style="width: 200px;" v-model="pwd" placeholder="这是密码"></el-input>
        <el-input show-password style="width: 200px;" v-model="pwd" placeholder="请输入密码"></el-input>
      </el-col>
    </el-row>

    <!-- 猜测自动补全 -->
    <el-row>
      <el-col>
        <el-autocomplete placeholder="请输入内容" :fetch-suggestions="querySearch" v-model="value2" :trigger-on-focus="false">

        </el-autocomplete>
      </el-col>
    </el-row>

    <!-- 下拉菜单 -->
     <el-row>
      <el-col>
        <el-select v-model="select" @change="selectChange" >
          <el-option v-for="item in fruits" :value="item.name" :key="item.id" :label="item.name"></el-option>
        </el-select>
      </el-col>
     </el-row>
     <!-- 单选框 -->
      <el-row>
        <el-radio-group v-model="radio" @change="radioChange">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-row>
      <!-- 表格 -->
       <el-row style="margin: 40px 0;">
        <el-table :data="tableData">
          <el-table-column label="序号" prop="id"></el-table-column>
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="地址" prop="address"></el-table-column>
          <el-table-column label="年龄" prop="age"></el-table-column>
        </el-table>
       </el-row>
  </div>
</template>

<script>
export default {
  name: 'Element',
  data() {
  return {
    value: '',
    value2:'',
    pwd: '',
    select: '',
    radio: 0,
    coffees: [{ value: '1星巴克咖啡' }, { value: '2瑞幸咖啡' }, { value: '3xx咖啡' }],
    fruits: [
      { name: '苹果', id: '1' },
      { name: '香蕉', id: '2' },
      { name: '西瓜', id: '3' }
    ],
    tableData: [
      { name: '青哥', address:'这里', id:'1', age:'30'},
      { name: '清哥', address:'这里', id:'2', age:'31'},
      { name: '氢哥', address:'这里', id:'4', age:'32'},
      { name: '箐哥', address:'这里', id:'3', age:'33'},
      { name: '氰哥', address:'这里', id:'5', age:'34'}
    ]
    }
  },
  methods: {
    querySearch(query, cb) {
      let results = query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
      console.log(results);
      cb(results)
    },
    selectChange() {
      console.log(this.select);
      
    },
    radioChange() {
      console.log(this.radio);
      
    }

  }
  }
</script>